<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			margin: 0 auto;
			margin-top: 30px;
			width: 500px;
			height: 60px;
			border: 1px solid black;
			text-align: center;
			font-size: 36px;
			position: relative;
			animation: move1 3s;

			/* animation-direction: alternate; */
		}

		@keyframes move1 {
			from {
				left: 1000px;
			}

			to {
				left: 0px;
			}
		}

		.a {
			animation: move1 3s ease 0.1s;

		}

		.b {
			animation: move1 3s ease 0.2s;

		}

		.c {
			animation: move1 3s ease 0.3s;

		}

		.d {
			animation: move1 3s ease 0.4s;

		}
	</style>
	<body>
		<div class="a">我是老大</div>
		<div class="b">我是老二</div>
		<div class="c">我是老三</div>
		<div class="d">我是老六</div>
	</body>
</html>
